{extend name='layout:app' /}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/myorder.css">
<style>
    .iconfont{
        color:#21A4FE
    }
    .list-bot .option{
        flex:1;padding:10px 0;color:#21A4FE
    }
    .list-bot .option .iconfont{
        font-size:30px
    }
    .list-bot{
        display:flex;align-items:center;text-align:center;background:#fff
    }
</style>
{/block}

{block name='content'}
<div id="app">
    <div class="nav">
        <i class="el-icon-arrow-left icon_left" @click="back"></i>
        <div>我的寄件订单</div>
        <i class="iconfont icon-home icon_right" @click="home" style="color: black;"></i>
    </div>

    <div class="order">
        <div class="order-sort" @click="orderSort">
            <div class="sort active">待处理</div>
            <div class="sort">已寄出</div>
        </div>
        <div class="order-list" v-cloak>
            <div class="list" v-for="order in orderList" style="clear:both">
                <div style="display: flex;">
                    <div class="item icon"><i class="iconfont icon-send"></i></div>
                    <div class="item">
                        <div class="order-num">订单号：<span>{{order.billcode}}</span></div>
                        <!--<div><span class="name">{{order.name}}</span><span class="phone">{{order.phone}}</span></div>-->
                        <div class="addr">收件人信息：{{order.receiver_addr}}</div>
                        <div class="date" style="color: #C6C6C6">{{order.create_time}}</div>
                    </div>
                </div>
                <div class="list-bot"style="border-top:1px solid #ddd;">
                    <div class="option" v-if="order.status == 0">
                        <span>等待处理</span>
                    </div>
                    <div class="option" v-if="order.status == 2">
                        <a class="option" :href="'tel:'+order.sender">联系运送人</a>
                    </div>
                    <div class="option" v-if="order.status == 2">
                        <a class="option" href="tel:17380054687">联系驿站</a>
                    </div>
                    <a class="option" v-if="order.status == 1" :href="`/index/person/expressCheck?orderNO=${order.code}`" >查看物流</a>
                </div>
            </div>
        </div>

        <div class="loading"  v-loading="loading">

        </div>
    </div>
</div>
{/block}

{block name='footer'}{/block}
{block name='js'}
<script>
    var that

    new Vue({
        el:'#app',
        data: {
            orderList: [],
            orderList2: [],     // 待处理
            orderList3: [],     // 已处理
            loading: true
        },
        created() {
            that = this  //生成vue副本
            $('.loading').height(screen.height - 90)
            this.getOrder()
            this.orderList = this.orderList2
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            orderSort(e) {
                const orderSort = e.target.innerText
                const orderStatus = sessionStorage.getItem('myOrder_Status')
                if(orderSort === '待处理') {
                    this.orderList = this.orderList2
                }else {
                    this.orderList = this.orderList3
                }
                $(e.target).addClass('active')
                $(e.target).siblings().removeClass('active')
            },
            getData(orde_status,resolve,reject) {
                $.ajax({
                    type: 'post',
                    url: '/index/person/getOrder',
                    data: {status: orde_status},
                    dataType: 'json'
                }).then(res => {
                    resolve(res)
                },err => {
                    reject(err)
                })
            },
            getOrder() {
                var p1 = new Promise((resolve, reject) => {
                    that.getData(0,resolve,reject)
                })
                var p2 = new Promise((resolve, reject) => {
                    that.getData(1,resolve,reject)
                })
                Promise.all([p1, p2]).then(res => {
                    console.log(res)
                    if(res[0].code === 0) {
                        for (const item of res[0].data) {
                            that.orderList2.push(item)
                        }
                        that.loading = false
                        $('.loading').hide()
                    }
                    if(res[1].code === 0) {
                        for (const item of res[1].data) {
                            that.orderList3.push(item)
                        }
                    }
                })
            }
        }
    });  
</script>
{/block}